<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <title>{{app.name}}</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- weinre调试，域名要一致
    <script src="http://test.taoliapp.com:8081/target/target-script-min.js#anonymous"></script>
    -->

    <style>
    .spinner.icon-ab-loading {
      position: fixed;
      top: 50%; margin-top: -20px;
      left: 50%; margin-left: -20px;
      width: 40px; height:40px;
      background-image: url("runtime/fonts/load.svg");
      background-size: 100%;
      animation:rotate 1s infinite linear;
    }
    </style>

    <link href="vendor/slick.js/slick/slick.css" rel="stylesheet">
    <link href="vendor/slick.js/slick/slick-theme.css" rel="stylesheet">

    {{^app.is_production}}
    <link href="{{prefix}}/css/runtime{{app.theme}}.css" rel="stylesheet">
    {{/app.is_production}}
    {{#app.is_production}}
    <link href="{{prefix}}/css/runtime{{app.theme}}.min.css" rel="stylesheet">
    {{/app.is_production}}

    <!-- 工程CSS -->
    {{^app.is_production}}
        {{#each styles}}
          <link href="css/{{this}}" rel="stylesheet">
        {{/each}}
    {{/app.is_production}}
    {{#app.is_production}}
        <link href="css/app.min.css" rel="stylesheet">
    {{/app.is_production}}

    <!-- 应用模型 -->
    <script src="app.js"></script>

    <script>
    var require = {
      waitSeconds: 15
    }
    </script>

    <!-- 考虑到移动端，必须使用相对路径 -->
    {{#app.is_development}}
    <script src="vendor/requirejs/require.js" data-main="{{prefix}}/js/bootstrap"></script>
    {{/app.is_development}}
    {{#app.is_debug}}
    <script src="vendor/requirejs/require.js" data-main="{{prefix}}/js/bootstrap.build"></script>
    {{/app.is_debug}}
    {{#app.is_production}}
    <script src="runtime/js/require.min.js" data-main="{{prefix}}/js/bootstrap.build.min"></script>
    {{/app.is_production}}
  </head>
  <body>
    <!-- 添加全局loding效果：效果在runtime定义 + 位置style中定义-->
    <div class="spinner icon-ab-loading">
    </div>
    <script type="text/javascript">
    // TODO 可在壳中直接操作body增加对应class,而不依赖UA，则更具备通用性
    var u = navigator.userAgent;
    var isiOS = u.match(/mplusIOS/); //ios终端
    if(isiOS)
      document.body.className = "platform-ios";
    </script>
  </body>
</html>
